<template>
  <el-drawer v-model="state.open" :title="'首页提示语'" destroy-on-close @close="close" @open="open">
    <template #default>
      <el-tabs style="margin-bottom: 15px;" type="border-card">
        <el-form ref="editForm" :model="data" :rules="rules" label-width="auto">
          <el-tab-pane label="提示信息">
            <el-form-item label="第一行" prop="firstLine">
              <el-input v-model="data.firstLine" placeholder="请输入第一行内容" style="width: 80%;margin-right: 10px"/><el-color-picker v-model="data.firstLineColor"/>
            </el-form-item>
            <el-form-item label="第一行颜色" prop="firstLineColor" style="display: none">
            </el-form-item>
            <el-form-item label="第二行" prop="secondLine">
              <el-input v-model="data.secondLine" placeholder="请输入第二行内容" style="width: 80%;margin-right: 10px"/>
              <el-color-picker v-model="data.secondLineColor"/>
            </el-form-item>
            <el-form-item label="第二行颜色" prop="secondLineColor" style="display: none">
            </el-form-item>
          </el-tab-pane>
        </el-form>
      </el-tabs>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="upsert">保存</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script>

export default {
  name: "Create",
  props: ['state'],
  data() {
    return {
      data: {
        firstLine: null,
        firstLineColor: '#F7D800',
        secondLine: null,
        secondLineColor: '#ffffff'
      },
      rules: {
        firstLine: [
          {
            required: false, trigger: ['change', 'blur'], validator: (_, value, callback) => {
              if (!this.data.firstLineColor && value) return callback(new Error('请选择第一行颜色'))
              callback()
            }
          }
        ],
        secondLine: [
          {
            required: false, trigger: ['change', 'blur'], validator: (_, value, callback) => {
              if (!this.data.secondLineColor && value) return callback(new Error('请选择第二行颜色'))
              callback()
            }
          }
        ],
      }
    }
  },
  methods: {
    async open() {
      this.data = await this.post('/notice-tips/get') ||{
        firstLine: null,
        firstLineColor: '#F7D800',
        secondLine: null,
        secondLineColor: '#ffffff'
      }
    },
    async upsert() {
      await this.$refs['editForm'].validate(async (valid, fields) => {
        if (!valid) return

        await this.post('/notice-tips/upsert', this.data);
        this.$emit('updated', {del: false})
        this.close()
      })
    },
    close() {
      this.state.open = false
      this.$refs['editForm'].resetFields()
    },
  }
}
</script>

<style scoped>
</style>